<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
            "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
    <head>
        <title>Fixture Demo</title>
        <style type='text/css'>
            body {font-family: verdana}
            #messages {height: 200px; overflow-y: auto;}
			#content {height: 551px; overflow: hidden;}
        </style>
    </head>
    <body>
<div id="demo-html">
<div id='content'></div>
</div>
<script type='text/javascript'  
        src='../../../steal/steal.js'></script>
<script type='text/javascript'>
steal.plugins('jquery/dom/fixture','jquery/dom/form_params').start()
</script>

<script type='text/javascript' id="demo-source">

// gets content from a fixture
$.get("/messages.php",
  function(html){
    // put the result in content
    $('#content').html(html)
  }, 
  'text',
  'fixtures/messages.html');


// makes 20 messages in a fixture
$.fixture.make(["messages","message"],20, function(i, messages){
  return {
    subject: "This is message "+i,
    body: "Here is some text for this message",
    user: "Justin",
    createdAt: String(new Date( Math.random() *  new Date().getTime()   ))
  }
});

// gets messages on submit
$("#getMessages").live("submit",function(ev){
    
  ev.preventDefault();
    
  //get the limit and offset
  var params = $(this).formParams().params;
    
  //use -messages fixture created by make
  $.ajax({
    url: "/messages.json",
    data: params,
    success: function(json){
      $("#messages").html( messagesHTML(json) )
    },
    dataType: "json",
    fixture: "-messages"
  })
});


// a fixture for creating messages
$.fixture["-createMessage"] = function(settings, cbType){
  // add to the message data what the server would add
  var message = $.extend({
    id: arguments.callee.count++,
    user: "Justin",
    createdAt: String(new Date())
  }, settings.data);
  
  message.id = $.fixture["~messages"].length;
    
  // adds the message to the fixture data
  $.fixture["~messages"].push(message);
    
  // return the data for the callback
  return [message];
};


// creates a message on submit
$("#message").live("submit", function(ev){
  ev.preventDefault();
    
  // get message data
  var message = $(this).formParams().message;
    
  // uses -createMessage fixture
  $.post("/message.json", message,function(json){
        
    //clear the message form
    $('[name*=message]').val("");
    
    //show the new message
    $('[name*=offset]').val(json.id)
    $('[name*=limit]').val(1)
    $("#getMessages").submit();
        
  },'json',"-createMessage")
})

//creates the html from message data
var messagesHTML = function(json){
  var html = ["<h4>Messages (count=", 
              json.count,
              ")</h4>",
              "<table>",
              "<tr>"],
      cols = ["subject",
	          "body",
			  "user",
			  "createdAt"];
  
  // html for the column headers		  
  $.each(cols, function(i, prop){
    html.push("<th>"+prop+"</th>")
  })
  
  html.push("</tr>")
  
  // html for the messages
  $.each(json.data, function(m, message){
    html.push("<tr>")
    $.each(cols, function(i, prop){
        html.push("<td>"+message[prop]+"</td>")
    })
    html.push("</tr>")
  })
  
  html.push("</table>");
  return html.join("");
}





</script>
    </body>
</html>